---
import {
  Header,
  BaseHead,
  SideBar,
  SVGDefs,
  OnThisPage,
  Footer,
  SearchPalette,
  ScrollbarWidth
} from "#components/fragments";
import type { MarkdownHeading } from "astro";
import menu from "./menu.json";
import { Button } from "#components/primitives";
import { mdiBookOpenBlankVariant, mdiConsoleLine, mdiGithub } from "@mdi/js";
import { discordIcon } from "#assets/icons";

interface MenuLevel {
  label: string;
  link?: string;
  menu?: MenuLevel[];
}

const image = "https://docs.vrite.io/meta-image.png";
const title = "Vrite － developer content platform";
const description =
  "Open-Source, collaborative developer content platform for documentation, technical blogs, and more.";
const flattenMenu = (
  menu: MenuLevel[],
  section: string,
  labels: string[]
): Array<{ label: string; link: string; section: string; labels: string[] }> => {
  return menu.flatMap((item) => {
    if (item.link) {
      return [{ label: item.label, link: item.link, section, labels: [...labels, item.label] }];
    }
    if (item.menu) {
      return flattenMenu(item.menu, section, [...labels, item.label]);
    }
    return [];
  });
};
const sections = [
  {
    label: "Documentation",
    link: "/getting-started/introduction",
    icon: mdiBookOpenBlankVariant,
    id: "docs"
  },
  {
    label: "API reference",
    link: "/api/authentication",
    icon: mdiConsoleLine,
    id: "api"
  },
  {
    label: "GitHub",
    link: "https://github.com/vriteio/vrite",
    icon: mdiGithub,
    id: "github"
  },
  {
    label: "Community",
    link: "https://discord.gg/yYqDWyKnqE",
    icon: discordIcon,
    id: "community"
  }
  /*{
    label: "Recipes",
    link: "/self-hosting/docker",
    icon: mdiTextBoxMultiple,
    id: "recipes"
  }*/
];
const flatMenu = [
  ...flattenMenu(menu.docs, "docs", []),
  ...flattenMenu(menu.recipes, "recipes", []),
  ...flattenMenu(menu.api, "api", [])
];
const currentEntry = flatMenu.find((item) => Astro.url.pathname.includes(item.link));
const nextEntry = currentEntry ? flatMenu[flatMenu.indexOf(currentEntry) + 1] : null;
const prevEntry = currentEntry ? flatMenu[flatMenu.indexOf(currentEntry) - 1] : null;

type Props = {
  headings: MarkdownHeading[];
  title: string;
  description?: string;
  hideOnThisPage?: boolean;
};
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <BaseHead
      description={Astro.props.description || description}
      title={Astro.props.title ? `${Astro.props.title} | Vrite Documentation` : title}
      image={image}
    />
  </head>
  <body class="overscroll-none overflow-x-hidden">
    <SVGDefs />
    <ScrollbarWidth client:only />
    <main
      class="flex flex-col items-center justify-center bg-gray-50 dark:bg-gray-800 min-h-screen"
    >
      <div class="flex-1 flex justify-center items-center flex-1 w-full max-w-screen-2xl relative">
        <SideBar
          menu={menu}
          sections={sections}
          currentSection={currentEntry?.section || "docs"}
          currentPath={Astro.url.pathname}
          client:load
        />
        <SearchPalette client:load />
        <div class="flex overflow-visible w-full relative h-full md:max-w-[calc(100%-16rem)]">
          <div
            class="flex-1 flex overflow-visible w-full justify-center min-h-screen"
            id="container"
          >
            <div
              class="relative flex-1 prose !md:max-w-unset !xl:max-w-screen-md w-full text-lg px-4 md:px-8 pb-24 h-fit"
            >
              <div class="sticky top-0 w-full left-0 z-1"><Header client:load /></div>
              <div class="pt-24">
                {
                  (currentEntry?.labels.length || 0) > 1 && (
                    <Button
                      badge
                      color="primary"
                      variant="text"
                      class="m-0 pl-1 py-0"
                      hover={false}
                    >
                      {currentEntry?.labels.at(-2)}
                    </Button>
                  )
                }
                <h1 class="font-extrabold">{Astro.props.title}</h1>
                <slot />
                <Footer nextEntry={nextEntry} previousEntry={prevEntry} />
              </div>
            </div>
            <OnThisPage
              headings={Astro.props.headings}
              hide={Astro.props.hideOnThisPage}
              client:load
            />
          </div>
        </div>
      </div>
    </main>
  </body>
</html>
